import React from 'react'
import {Breadcrumb, Layout} from 'antd';
import CommonAside from "../../components/Layout/CommonAside";
import CommonHeader from "../../components/Layout/CommonHeader";
import {useTypedSelector} from '../../hooks';

const {Content, Footer} = Layout;

const App: React.FC = () => {
    const collapsed = useTypedSelector((state) => state.tab.isCollapse);
    return (
        <Layout style={{minHeight: '100vh'}}>
            <CommonAside collapsed={collapsed}></CommonAside>
            <Layout>
                <CommonHeader collapsed={collapsed}></CommonHeader>
                <Content style={{margin: '0 16px'}}>
                    <Breadcrumb style={{margin: '16px 0'}}>
                        <Breadcrumb.Item>User</Breadcrumb.Item>
                        <Breadcrumb.Item>Bill</Breadcrumb.Item>
                    </Breadcrumb>
                    <div
                        style={{
                            padding: 24,
                            minHeight: 360,
                        }}
                    >
                        Bill is a cat.
                    </div>
                </Content>
                <Footer style={{textAlign: 'center'}}>
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
};

export default App;